<template>
  <div class="dashbord">
    <!-- 统计 -->
    <div class="card">
      <div class="title">
        <h4>基本信息</h4>
        <h4>{{$moment().format("YYYY-MM-DD HH:mm:ss")}}</h4>
        <h4><i class="el-icon-refresh-right"></i></h4>
      </div>
      <div class="count-list flex">
        <div class="count-item" @click="navigateTo('managerGoods')">
          <div>
            <i class="el-icon-picture-outline" style="font-size: 31px"></i>
          </div>
          <div>
            <div class="counts" style="color:#FFF">{{ homeData.goodsNum || 0 }}</div>
            <div>未付订单</div>
          </div>
        </div>
        <div class="count-item" @click="navigateTo('orderList')">
          <div>
            <i class="el-icon-s-grid" style="font-size: 31px"></i>
          </div>
          <div>
            <div class="counts" style="color:#FFF">{{ homeData.orderNum || 0 }}</div>
            <div>订单数量</div>
          </div>
        </div>
        <div class="count-item" @click="navigateTo('memberList')">
          <div>
            <i class="el-icon-s-custom" style="font-size: 31px"></i>
          </div>
          <div>
            <div class="counts" style="color:#FFF">￥{{ homeData.memberNum || 0 }}</div>
            <div>成交金额</div>
          </div>
        </div>
        <div class="count-item" @click="navigateTo('shopList')">
          <div>
            <i class="el-icon-menu" style="font-size: 31px"></i>
          </div>
          <div>
            <div class="counts" style="color:#FFF">{{ homeData.storeNum || 0 }}</div>
            <div>新加盟商数量</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 今日待办 -->
    <div class="card">
      <h4>今日待办</h4>
      <div class="todo-list flex">
        <div class="todo-item" @click="navigateTo('applyGoods')">
          <div class="counts">1</div>
          <div>待审核商品</div>
        </div>
        <div class="todo-item" @click="navigateTo('orderComplaint')">
          <div class="counts">1</div>
          <div>待审核订单</div>
        </div>
        <div class="todo-item" @click="navigateTo('afterSaleOrder')">
          <div class="counts">1</div>
          <div>未审核验收单</div>
        </div>
        <div class="todo-item">
          <div class="counts">1</div>
          <div>未配送订单</div>
        </div>
        <div class="todo-item" @click="navigateTo('accountStatementBill')">
          <div class="counts">1</div>
          <div>配送数量</div>
        </div>
        <div class="todo-item" @click="navigateTo('shopAuth')">
          <div class="counts">1</div>
          <div>退货申请</div>
        </div>
      </div>
    </div>

    <!-- 今日，流量概括 -->
    <div class="card flow">
      <div class="flow-list flex">
        <div class="flow-item">
          <div class="flow-member">
            <div>当前在线人数</div>
            <span>
              {{ homeData.currentNumberPeopleOnline || 0 }}
            </span>
          </div>
          <div class="flow-wrapper">
            <h4>流量概括</h4>
            <div class="card flow-box flex">
              <div class="flow-box-item">
                <div>今日访客数</div>
                <div class="counts">
                  {{ homeData.todayUV || 0 }}
                </div>
              </div>
              <div class="flow-box-item">
                <div>昨日访客数</div>
                <div class="counts">
                  {{ homeData.yesterdayUV || 0 }}
                </div>
              </div>
            </div>

            <div class="flow-splice flex">
              <div class="flow-box-splice">
                <div>前七日访客数</div>
                <div class="counts">
                  {{ homeData.lastSevenUV || 0 }}
                </div>
              </div>
              <div class="flow-box-splice">
                <div>前三十日访客数</div>
                <div class="counts">
                  {{ homeData.lastThirtyUV || 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="today-box">
          <h4>今日概括</h4>
          <div class="today-list flex">
            <div class="today-item">
              <div>今日热卖商品数</div>
              <span>{{ homeData.todayOrderNum }}</span>
            </div>
            <div class="today-item">
              <div>今日新品商品数</div>
              <span v-if="homeData.todayOrderPrice"
                >￥{{ homeData.todayOrderPrice | unitPrice }}</span
              >
              <span v-else>￥0.00</span>
            </div>
            <div class="today-item">
              <div>今日新增加盟商</div>
              <span>{{ homeData.todayStoreNum || 0 }}</span>
            </div>
            <div class="today-item">
              <div>今日上架商品数量</div>
              <span>{{ homeData.todayGoodsNum || 0 }}</span>
            </div>
            <div class="today-item">
              <div>今日下架商品数量</div>
              <span>{{ homeData.todayMemberEvaluation || 0 }}</span>
            </div>
            <div class="today-item">
              <div>今日促销商品数</div>
              <span>{{ homeData.todayMemberNum || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- chart -->
    <div class="card transform">
      <div>
        <h4>最近24小时在线人数（整点为准）</h4>
        <div id="historyMemberChart" style="height:400px"></div>
      </div>
    </div>
    <!-- chart -->
    <div class="charts flex">
      <div class="chart-item">
        <h4>订单数量</h4>
        <div id="pvChart" style="height:300px"></div>
      </div>
      <div class="chart-item">
        <h4>交易趋势</h4>
        <div id="orderChart" style="height:300px"></div>
      </div>
    </div>

    <!-- top10商品 -->
    <div class="card transform">
      <h4>热卖商品TOP10</h4>
      <el-table :data="list1" stripe>
        <el-table-column  label="排名" width="50" type="index"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="价格" width="150">
          <template slot-scope="scope">
            <span style="color:rgb(255, 92, 88)">￥{{numberToCurrencyNo(scope.row.price)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="销量" width="50"></el-table-column>
      </el-table>
    </div>

    <!-- top10店铺 -->
    <div class="card transform">
      <h4>加盟商TOP10</h4>
      <el-table :data="list2" stripe>
        <el-table-column  label="排名" width="50" type="index"></el-table-column>
        <el-table-column prop="storeName" label="加盟商"></el-table-column>
        <el-table-column prop="price" label="金额" width="150">
          <template slot-scope="scope">
            <span style="color:rgb(255, 92, 88)">￥{{numberToCurrencyNo(scope.row.price)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="销量" width="50"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {initOrderChartList,initOrderChartList2,initOrderChartList3} from './js/echartsdata.js'
import {tablelist} from "./js/table.js"
import {numberToCurrencyNo} from "@/utils/numberToCurrency.js"
export default {
  name: "home",

  data() {
    return {
      numberToCurrencyNo,
      homeData: "", // 首页数据
      list1:tablelist(1),
      list2:tablelist(2),
    };
  },
  created() {
    this.$nextTick(()=>{
      initOrderChartList();
      initOrderChartList2();
      initOrderChartList3();
    })
  },
  methods: {
    // 路由跳转
    navigateTo(name) {
      this.$router.push({
        name,
      });
    },
    // 实例化订单图表
    
  },
};
</script>
<style lang="scss" scoped>
@import "./home.scss";
.title{
  display: flex;
  justify-content: space-between;
}
.dashbord{
  height: calc(100vh - 110px);
  overflow: auto;
}
</style>
